<template>
  <div class="top-title">
    <h3 :class="color">{{ title }}</h3>
    <slot name="right">
      <span
        v-if="link"
        class="link-more"
        @click="link ? $router.push(link) : '#'"
        >更多</span
      >
    </slot>
  </div>
</template>
<script>
export default {
  name: 'IndexTitle',
  props: {
    link: {
      type: String,
      default: null,
    },
    title: {
      type: String,
      default: '模块标题',
    },
    color: {
      type: String,
      default: null,
    },
  },
}
</script>
<style lang="scss" scoped>
.top-title {
  display: flex;
  justify-content: space-between;
  .link-more {
    font-size: 13px;
    background-image: url('~@/assets/icons/more-link-icon.png');
    background-repeat: no-repeat;
    background-position-y: center;
    padding-left: 20px;
    color: #adadad;
    line-height: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  align-items: center;
}
</style>
